<template>
  <Nav :todoCount="coutObj.todoCount" :progressCount="coutObj.progressCount" />
<div>
  <div class="container mt-3">
    <Title :title="'Todo'" />
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-6" v-for="(task, index) in taskList" :key="index">
        <div class="task-content border p-3">
          <Content :title="task.task_name" :desc="task.task_content" :detail="task.task_content" :imgSrc="task.img"/>
          <OperationBtn :status="task.status" :id="task.id" :getTaskList="getTaskList" :getAllCount="getAllCount"/>
        </div>
      </div>
    </div>
  </div>

  <div class="container mt-5">
    <Title :title="'Company News'" />
    <div v-for="(news, index) in newsList" :key="index">
      <div class="row news" v-if="index%2 ==0">
        <NewsImages :imgSrc="news.imgSrc"/>
        <NewsContent :title="news.title" :desc="news.content" :detail="news.content"/>
      </div>

      <div class="row news" v-if="index%2 !==0 && windowWidth<=932">
        <NewsImages :imgSrc="news.imgSrc"/>
        <NewsContent :title="news.title" :desc="news.content" :detail="news.content"/>
      </div>

      <div class="row news" v-if="index%2 !==0 && windowWidth>932">
        <NewsContent :title="news.title" :desc="news.content" :detail="news.content"/>
        <NewsImages :imgSrc="news.imgSrc"/>
      </div>
    </div>
  </div>
</div>
</template>

<script setup lang="js">
import Content from '../components/content.vue';
import OperationBtn from '../components/operationBtn.vue';
import Title from '../components/title.vue';
import NewsContent from '../components/newsContent.vue';
import NewsImages from '../components/newsImages.vue';
import Nav from '../components/nav.vue';

import { ref } from 'vue';

import { get } from '../plugin/api';

const newsList = ref([]);

const getNewsList = async () => {
  try{
    const baseUrl = "http://175.24.81.97:8093";
    const data = await get(`${baseUrl}/news/list`);

    newsList.value = data;
    // console.log(newsList.value)
  }catch (err){
    console.log(err);
  }
}

const taskList = ref([]);
const getTaskList = async () => {
  try{
    const baseUrl = "http://175.24.81.97:8093";
    const data = await get(`${baseUrl}/todo/list`);
    data.map(item => {
      if(!item.img) {
        item.img = '';
      }
      return item;
    })
    console.log(data);
    taskList.value = data;
    // console.log(taskList.value)
  }catch (err){
    console.log(err);
  }
}

const coutObj = ref({});

const getAllCount = async () => {
 try{
   const baseUrl = "http://175.24.81.97:8093";
   Promise.all([
     await get(`${baseUrl}/todo/count`),
     await get(`${baseUrl}/progress/count`),
     await get(`${baseUrl}/complete/count`)
   ]).then((countList) => {
     const newObj = {};
     countList.map(item => {
       const keys = Object.keys(item);
       newObj[keys[0]] = item[keys[0]];
     })
     coutObj.value = newObj;
   })
 }catch (err){
   console.log(err);
 }
}


const windowWidth = ref(0)

onMounted(() => {
  getNewsList();
  getTaskList();
  getAllCount();

  getWindowResize()
  window.addEventListener('resize', getWindowResize)
})

const getWindowResize = function () {
  windowWidth.value = window.innerWidth
}

// const taskList = ref([
//   {
//     title: "Task Title 1",
//     imgSrc: "http://localhost:3000/_nuxt/1.png",
//     desc: "Task description",
//     detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
//     status: 1
//   },
//   {
//     title: "Task Title 2",
//     imgSrc: "",
//     desc: "Task description",
//     detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
//     status: 1
//   },
//   {
//     title: "Task Title 3",
//     imgSrc: "http://localhost:3000/_nuxt/2.png",
//     desc: "Task description",
//     detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
//     status: 1
//   },
//   {
//     title: "Task Title 4",
//     imgSrc: "http://localhost:3000/_nuxt/1.png",
//     desc: "Task description",
//     detail: "Task description Task description Task description Task description Task description Task description Task descriptio",
//     status: 1
//   }
// ])

// const newsList = ref([
//   {
//     title: "News Title 1",
//     imgSrc: ["http://localhost:3000/_nuxt/1.png"],
//     desc: "News description",
//     detail: "News description Task description Task description Task description Task description Task description Task descriptio",
//   },
//   {
//     title: "News Title 2",
//     imgSrc: ["http://localhost:3000/_nuxt/1.png"],
//     desc: "News description",
//     detail: "News description Task description Task description Task description Task description Task description Task descriptio",
//   },
//   {
//     title: "News Title 3",
//     imgSrc: ["http://localhost:3000/_nuxt/1.png"],
//     desc: "News description",
//     detail: "News description Task description Task description Task description Task description Task description Task descriptio",
//   }
// ])
</script>

